<template>
  <div>
    <div id="map"></div>
  </div>
</template>

<script>
import { $prototype } from "../main";
import gcoord from "gcoord";
import { Scene } from "@antv/l7";
import { ControlEvent, DrawControl } from "@antv/l7-draw";
import { GaodeMap } from "@antv/l7-maps";
import { useCounterStore } from "../stores/counter.js";
export default {
  data() {
    return {};
  },
  mounted() {
    const store = useCounterStore();

    //创建地图场景(高德底图)
    const scene = new L7.Scene({
      id: "map",
      map: new L7.GaodeMap({
        style: "grey",
        center: [108.5, 34.3],
        pitch: 0,
        zoom: 4,
        token: "bd4adce5561e1fdba1fd47b7dd3f77bd",
      }),
      logoVisible: false, //隐藏左下角logo
    });

    //加载控件
    scene.on("loaded", () => {
      //加载一个绘画条
      const drawControl = new DrawControl(scene, {});
      scene.addControl(drawControl);

      drawControl.on(ControlEvent.DrawChange, (changeType) => {
        console.log(changeType);
      });

      //放大缩小控件
      const zoom = new L7.Zoom({
        position: "topright",
      });
      scene.addControl(zoom);

      //全屏
      const fullscreen = new L7.Fullscreen({
        position: "topright",
      });
      scene.addControl(fullscreen);

      //主题切换控件
      const mapTheme = new L7.MapTheme();
      scene.addControl(mapTheme);

      //定位
      const geoLocate = new L7.GeoLocate({
        transform: (position) => {
          // 将获取到基于 WGS84 地理坐标系 的坐标转成 GCJ02 坐标系
          return gcoord.transform(position, gcoord.WGS84, gcoord.GCJ02);
        },
      });
      scene.addControl(geoLocate);

      //显示经纬度
      const mouseLocation = new L7.MouseLocation({
        transform: (position) => {
          return position;
        },
        position: "bottomright",
      });
      scene.addControl(mouseLocation);

      //比例尺
      const scale = new L7.Scale({
        zoomInTitle: "放大",
        zoomOutTitle: "缩小",
        position: "bottomright",
      });
      scene.addControl(scale);
    });

      //挂载到原型
    $prototype.$scene = scene;


  },
};
</script>

<style lang='scss' scoped>
</style>